import React, { Component } from 'react'
import { Link, withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { Menu } from 'antd';
import logo from "../../../static/imgs/logo.png";
import "./css/left_nav.less";
import menuConfigMap from "../../../config/menu_config";
import { saveTitle } from '../../../redux/actions/menu_action';
const { SubMenu, Item } = Menu;

@connect(
    state => ({ userInfo: state.userInfo }),
    { saveTitle: saveTitle }
)
@withRouter
class LeftNav extends Component {

    changeMenuItem = (title) => {
        this.props.saveTitle(title);
    }

    render() {
        //根据用户的权限获取菜单
        let { menus } = this.props.userInfo.user.role;
        let topMenuArr = [];
        let subMenuArr = [];
        menus.forEach((v) => {
            if ((v.split("/").length - 1) === 1) {
                topMenuArr.push({ name: v });
            }
            if ((v.split("/").length - 1) === 2) {
                subMenuArr.push({ topName: v.substring(0, v.lastIndexOf("/")), name: v.substring(v.lastIndexOf("/"), v.length) });
            }
        })
        subMenuArr.forEach(v => {
            topMenuArr.forEach(innderV => {
                if (v.topName === innderV.name) {
                    if (innderV.child === undefined) {
                        innderV.child = []
                    }
                    innderV.child.push({ name: v.name })
                }
            })
        });
        
        return (
            <div>
                <header className="nav-header">
                    <img src={logo} alt="logo" />
                    <h1>商品管理系统</h1>
                </header>
                <Menu
                    selectedKeys={(this.props.location.pathname.indexOf("product") !== -1 && this.props.location.pathname.indexOf("category") === -1) ? "/product":"/" + this.props.location.pathname.split("/").reverse()[0]}
                    defaultOpenKeys={this.props.location.pathname.split("/").splice(2).map(v => "/" + v)}
                    mode="inline"
                    theme="dark"
                >
                    {
                        topMenuArr.map(v => {
                            if (v.child) {
                                return (<SubMenu key={v.name} title={menuConfigMap.get(v.name).title} icon={menuConfigMap.get(v.name).iconObj}>
                                    {
                                        v.child.map(subV => {
                                            let { title, iconObj, linkto } = menuConfigMap.get(subV.name);
                                            return (<Item key={subV.name} icon={iconObj} onClick={() => (this.changeMenuItem(title))}>
                                                <Link to={linkto}>
                                                    {title}
                                                </Link>
                                            </Item>
                                            )
                                        })
                                    }
                                </SubMenu>
                                )
                            } else {
                                let { title, iconObj, linkto } = menuConfigMap.get(v.name);
                                return (<Item key={v.name} icon={iconObj} onClick={() => { this.changeMenuItem(title) }}>
                                    <Link to={linkto}>
                                        {title}
                                    </Link>
                                </Item>
                                )
                            }
                        })
                    }
                </Menu>
            </div>
        )
    }
}
export default LeftNav;
